import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { getNewDate } from '/@/api/travelItinerary/getDateAPI';
import { dateUtil } from '/@/utils/dateUtil';

//表格信息展示
export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    ifShow: false,
  },
  {
    title: '审批单号',
    dataIndex: 'requestCode',
    width: '96px',
  },
  {
    title: '部门ID',
    dataIndex: 'departmentId',
    width: 50,
  },
  {
    title: '员工编号',
    dataIndex: 'employeeNo',
    width: 50,
  },
  {
    title: '员工姓名',
    dataIndex: 'employeeName',
    width: 60,
  },
  {
    title: '差旅标准',
    dataIndex: 'employeeLeave',
    resizable: true,
    width: 150,
    ellipsis: false,
    // fixed: 'left',
  },
  {
    title: '出发地',
    dataIndex: 'departure',
    ifShow: false,
  },
  {
    title: '目的地',
    dataIndex: 'destination',
    width: 60,
  },
  {
    title: '出发日期',
    dataIndex: 'dateOfDeparture',
    width: 80,
    format: (val) => {
      return dateUtil(val).format('YYYY-MM-DD');
    },
  },
  {
    title: '提前出发日期',
    dataIndex: 'dateOfDepartureForward',
    width: 60,
    ifShow: false,
    format: (val) => {
      return dateUtil(val).format('YYYY-MM-DD');
    },
  },
  {
    title: '返程日期',
    dataIndex: 'dateOfReturn',
    width: 80,
    format: (val) => {
      return dateUtil(val).format('YYYY-MM-DD');
    },
  },
  {
    title: '延期返回日期',
    dataIndex: 'dateOfReturnProlong',
    width: 80,
    ifShow: false,
    format: (val) => {
      return dateUtil(val).format('YYYY-MM-DD');
    },
  },
  {
    title: '交通工具',
    dataIndex: 'vehicle',
    width: 90,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    ifShow: false,
  },
  {
    title: '同步审批单号',
    dataIndex: 'applyApprovalFormNo',
    width: 120,
  },
  {
    title: '扫码员工No.',
    dataIndex: 'scanCodeEmpNo',
    width: 70,
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    width: 110,
    format: (val) => {
      return dateUtil(val).format('YYYY-MM-DD HH:mm:ss');
    },
  },

  {
    title: '状态',
    dataIndex: 'state',
    width: 70,
    customRender: ({ text }) => {
      if (text === 3) {
        return h(Tag, { color: 'blue' }, () => '扫描（未同步）');
      } else if (text === 2) {
        return h(Tag, { color: 'yellow' }, () => '过期失效');
      } else if (text === 1) {
        return h(Tag, { color: 'green' }, () => '已同步（有效）');
      } else if (text === 4) {
        return h(Tag, { color: 'red' }, () => '作废');
      }
    },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    // align: 'center',
    width: 100,
    // slots: { customRender: 'name' }, //绑定插槽
    // fixed: 'right',
  },
];

// search框表单
export const searchFormSchema: FormSchema[] = [
  {
    field: 'employeeNo',
    label: '员工编号',
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      placeholder: ' ',
      style: 'width: 200px',
    },
  },
  {
    field: 'requestCode',
    label: '申请单号',
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      placeholder: ' 申请单号（审批单号）',
      style: 'width: 220px',
    },
  },
  {
    field: 'employeeName',
    label: '员工姓名',
    component: 'Input',
    colProps: { span: 6 },
    componentProps: {
      placeholder: ' ',
      style: 'width: 230px',
    },
  },
  {
    field: 'createTimeStart',
    label: '创建时间',
    component: 'Select',
    colProps: { span: 6 },
    defaultValue: getNewDate('before', 1),
    componentProps: {
      style: 'width: 200px',
      options: [
        { label: '创建时间为近1个月内数据', value: getNewDate('before', 1) },
        { label: '创建时间为近3个月内数据', value: getNewDate('before', 3) },
        { label: '创建时间为近半年内数据', value: getNewDate('before', 6) },
        { label: '创建时间为近一年内数据', value: getNewDate('before', 12) },
      ],
    },
  },

  {
    field: 'state',
    label: '审批单状态',
    component: 'Select',
    colProps: { span: 6 },
    componentProps: {
      placeholder: '请选择审批单状态',
      style: 'width: 200px',
      options: [
        { label: '扫描（未同步）', value: 3 },
        { label: '过期失效', value: 2 },
        { label: '已同步（有效）', value: 1 },
        { label: '已作废', value: 4 },
      ],
    },
  },

  {
    field: 'dateOfDeparture',
    component: 'RangePicker',
    label: '出发日期',
    colProps: {
      span: 6,
    },
    componentProps: {
      style: 'width: 230px',
      placeholder: ['出发日期起', '出发日期止'],
    },
  },
  // {
  //   field: 'dateOfDepartureForward',
  //   component: 'RangePicker',
  //   label: '提前出发日期：',
  //   colProps: {
  //     span: 6,
  //   },
  //   componentProps: {
  //     style: 'width: 300px',
  //     placeholder: ['提前出发日期起', '提前出发日期止'],
  //   },
  // },
  {
    field: 'dateOfReturn',
    component: 'RangePicker',
    label: '返程日期',
    colProps: {
      span: 6,
    },
    componentProps: {
      placeholder: ['返程日期起', '返程日期止'],
      style: 'width: 230px',
    },
  },
  // {
  //   field: 'dateOfReturnProlong',
  //   component: 'RangePicker',
  //   label: ' 延期返回日期：',
  //   colProps: {
  //     span: 6,
  //   },
  //   componentProps: {
  //     style: 'width: 300px',
  //     placeholder: ['延期返回日期起', '延期返回日期止'],
  //   },
  // },
];
